<template>
  <div class="Video">
    <el-upload
      class="avatar-uploader el-upload"
      :action="serverUrl"
      :show-file-list="false"
      name="file"
      accept=".mp4"
      :headers="header"
      :data="body"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :on-progress="uploadVideoProcess"
    >
      <video
        v-if="showVideoPath !== '' && !videoFlag"
        :src="getImageUrl(showVideoPath)"
        class="avatar video-avatar"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <i
        v-else-if="showVideoPath === '' && !videoFlag"
        class="el-icon-plus avatar-uploader-icon"
      />
      <el-progress
        v-if="videoFlag === true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top:30px;"
      />
    </el-upload>
    <p class="text">
      请保证视频格式正确,目前仅支持MP4格式，且不超过200M
    </p>
  </div>
</template>

<script>
/**
 * 组件使用实例
 * <Video v-bind:filePath.sync="videoPath" :header="header" :body="body"/>
 * videoPath: 视频地址
 * header: 请求头
 * body： 请求参数
 * */
export default {
  name: "Video",
  props: {
    header: Object,
    filePath: String,
    body: Object
  },
  //初始化参数
  data() {
    return {
      serverUrl: "/api/file/uploadFile", //你要上传视频到你后台的地址
      videoFlag: false, //是否显示进度条
      videoUploadPercent: "", //进度条的进度，
      showVideoPath: ""
    };
  },
  watch: {
    filePath: function() {
      if (typeof this.filePath === "undefined") {
        return this.showVideoPath;
      } else {
        this.showVideoPath = this.filePath;
        return this.showVideoPath;
      }
    }
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      const isLt200M = file.size / 1024 / 1024 < 200;
      if (["video/mp4"].indexOf(file.type) === -1) {
        //'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt200M) {
        this.$message.error("上传视频大小不能超过200MB哦!");
        return false;
      }
    },
    //进度条
    // eslint-disable-next-line no-unused-vars
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },

    //上传成功回调
    // eslint-disable-next-line no-unused-vars
    handleVideoSuccess(res, file) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.showVideoPath = res.fileName;
      this.$emit("update:filePath", this.showVideoPath);
    },
    getImageUrl(url) {
      if (url === "") {
        return url;
      }
      //图片前缀
      let prefix = "/api/file-preview/";
      return prefix + url;
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
</style>
